<template>
  <div>
    <div class="col-sm-3 col-md-2 sidebar">
      <ul class="nav nav-sidebar">
        <!-- 编程式导航 -->
        <!-- <li
          :class="{ active: $route.path == item.path }"
          v-for="item in navList"
          :key="item.id"
          @click="goto(item.path)"
        >
          <a href="javascript:;">{{ item.title }}</a>
        </li> -->
        <!-- <li
          :class="{ active: currentPath.indexOf(item.path) >= 0 }"
          v-for="item in navList"
          :key="item.id"
          @click="goto(item.path)"
        >
          <a href="javascript:;">{{ item.title }}</a>
        </li> -->

        <!-- 声明式导航 -->
        <router-link
          tag="li"
          :to="item.path"
          v-for="item in navList"
          :key="item.id"
          active-class="active"
          ><a href="javascript:;">{{ item.title }}</a></router-link
        >
        <!-- <li><a href="#/home">Reports</a></li>
        <li><a href="#/news">Analytics</a></li>
        <li><a href="#/users">Export</a></li> -->
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        {
          id: 1,
          title: "首页",
          path: "/home"
        },
        {
          id: 2,
          title: "新闻管理",
          path: "/news" // /news
        },
        {
          id: 3,
          title: "用户管理",
          path: "/users"
        }
      ],
      // currentIndex: 0
      currentPath: "/home"
    };
  },

  components: {},

  methods: {
    //功能：点击导航跳转页面
    goto(path, index) {
      this.$router.push(path); //$router对象主要用于路由跳转
      // this.currentPath = path; //高亮
    }
  },

  // created() {
  //   //打印路由信息
  //   console.log(this.$route, 666);
  //   this.currentPath = this.$route.path;
  // }
  watch: {
    //监听路由的变化
    // $route: {
    //   deep: true,
    //   handler(route) {
    //     console.log(route, 888);
    //     this.currentPath = route.path;
    //   }
    // }
  }
};
</script>

<style scoped>
</style>